<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>修改资料</title>
    <include file="public@head" />
    <link rel="stylesheet" href="__TMPL__public/assets/js/cropper/cropper.css">

    <style>

    </style>

</head>
<body>
<include file="public@nav" />

<div class="center pnWrapper clearfix">
    <include file="public@persnav" />

    <div class="pn_right_wra fr">
        <h3>
            修改头像
        </h3>
        <div class="ic_edit_wra">
            <p class="tips">Hi，<span class="user_name"></span></p>

            <div id="hc_center_wra">
                <img class="user_img" src="" alt=""><br />
                <span>当前头像</span><br />
               <!-- <form  method="post" action="postData" class=" clearfix" name="test2"  enctype="multipart/form-data">
                    <input name=img type="file">
                    <input name="url" type="text" value="Abouts/upload">
                    <input name=data[udid] type="text" value="13">
                    <input name=data[token] type="text" value="b8642715dff7ad19b76efb3d5f9e9b5e31dd7673">
                    <input type="submit">
                </form>-->
                <form id="hc_upload_form" class="upload-form-com clearfix"  enctype='multipart/form-data'>
                    <input class="fl" id="upTxt" type="text" disabled>
                    <span class="uploadBtn small fl"><input id="iuy" onchange="$('#upTxt').val($(this).val())" type="file" accept="image/jpg,image/jpeg,image/png" name=img><span>浏览</span></span>
                    <div style="clear: both;"></div>
                    <span class="submit fr">上传</span>

                    <input name=udid type="hidden" value="">
                    <input name=token type="hidden" value="">

                    <!-- <input type="submit" class="submit fr">
                     <input name="udid" id="user_id" type="hidden" value="">
                     <input name="token" id="user_token" type="hidden" value="">-->
                </form>
                <div id="hc_upload_confirm" class="displayNone">
                    <div style="width: 242px;height: 242px; display: inline-block; margin: 24px auto 30px;">
                        <img class="avatar_new" src="" alt="">
                    </div>
                    <div class="clearfix">
                        <span class="hc_confirm_btn fr" style="margin-right: 84px;">完成</span>
                        <span class="hc_back_btn fr">重新上传</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<include file="public@footer" />
<include file="public@scripts" />
<script type="text/javascript" src="__TMPL__public/assets/js/personal.js"></script>
<script type="text/javascript" src="__TMPL__public/assets/js/cropper/cropper.js"></script>
<script>
    headerMove(7);

$(function(){
    var login_cookie = $.cookie("get", {
        name: 'login'
    });

    login_cookie = $.parseJSON(login_cookie);
    console.log(login_cookie);
    $("input[name=udid]").val(login_cookie.data.udid);
    $("input[name=token]").val(login_cookie.token);


    var cutImg = function(){
        var $image = $('.avatar_new');
        var $button = $('.hc_confirm_btn');
        var croppable = false;
        function getRoundedCanvas(sourceCanvas) {
            var canvas = document.createElement('canvas');
            var context = canvas.getContext('2d');
            var width = sourceCanvas.width;
            var height = sourceCanvas.height;
            canvas.width = width;
            canvas.height = height;
            context.beginPath();
            context.arc(width / 2, height / 2, Math.min(width, height) / 2, 0, 2 * Math.PI);
            context.strokeStyle = 'rgba(0,0,0,0)';
            context.stroke();
            context.clip();
            context.drawImage(sourceCanvas, 0, 0, width, height);
            return canvas;
        }

        $image.cropper({
            aspectRatio: 1,
            viewMode: 1,
            ready: function () {
                croppable = true;
            }
        });

        $button.on('click', function () {
            var croppedCanvas;
            var roundedCanvas;
            if (!croppable) {
                return;
            }
            // Crop
            croppedCanvas = $image.cropper('getCroppedCanvas');

            // Round
            roundedCanvas = getRoundedCanvas(croppedCanvas);

            // Show

            console.log(roundedCanvas.toDataURL());
//            $result.html('<img src="' + roundedCanvas.toDataURL() + '">');
        });
    };

    $(".submit").on("click",function(){

        var file_info = $("#upTxt").val();
        if(file_info!=""){
//            var file_form = new FormData(document.getElementById("iuy"));
         /*   var login_cookie = $.cookie("get", {
                name: 'login'
            });

            login_cookie = $.parseJSON(login_cookie);
            $("input[name=uid]").val(login_cookie.data.udid);
            $("input[name=token]").val(login_cookie.token);*/

            var file_form = new FormData($('#hc_upload_form')[0]);//提交表单所有数据
            /*  var file_form = new FormData();
             file_form.append('file',$("#iuy")[0].files[0]); //单独传一个图片
             //读取input文件内容，放到fileReader的result字段里
             var fr = new FileReader();
             fr.readAsDataURL($("#iuy")[0].files[0]);
             fr.onload = function(e){
             console.log(this.result);
             };*/
            $.ajax({
                type: "post",
                url: "{$spost}Abouts/upload",
                data: file_form,
                processData:false,
                contentType:false,
                async: true,
                datatype: "JSON",
                beforeSend: function(){
                    var uploading = true;
                    console.log(uploading);
                },
                success: function (obj) {
                    var data = $.parseJSON(obj);
                    if (data.code == 200) {
                        $("#hc_upload_confirm").show();
                        $("#hc_upload_form").hide();
                        var $image = $('.avatar_new');
                        var img_url = "{$simgs}"+data.data.path+data.data.file;
                        $image.attr("src",img_url);
                        $(".hc_confirm_btn").attr({"data-file":data.data.file,"data-path":data.data.path});
                    }
                    if (data.code == 300) {
                        //清除浏览器缓存数据 跳转登录页面，
                        alert(data.data.message);
                        return false;
                    }
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    console.log(XMLHttpRequest.readyState);
                    console.log(textStatus);
                    console.log(errorThrown);
                }
            });
        }

        $(".hc_back_btn").on("click",function(){
            $("#hc_upload_confirm").hide();
            $("#hc_upload_form").show();
        });

        $(".hc_confirm_btn").on("click",function(){
            var focus_param = {
                url:'Users/edit',
                data:{
                    path:$(this).data("path"),
                    file:$(this).data("file")
                }
            };
            $.JsonRpc(focus_param,function(data){
                if(data.code==200){
                    localStorage.u_avatar = data.data.u_avatar;
                    location.reload();
                }
            })
        });
    });
})

</script>
</body>
</html>